<script lang="ts" setup>
import { computed, render } from 'vue';
import { DeviceServiceDetailResult, DeviceStatusServiceStatusListResult } from '../interface';
import { switchs, slider } from '../statedata'
const p = defineProps<{ device: DeviceServiceDetailResult, list?: DeviceStatusServiceStatusListResult }>()


const objdata = [
    switchs,
    slider,
]



const status = computed<{ name: string, code: string, value: any, render: (value: any) => any, divide?: number }[]>(() => {
    return p.list?.status.filter(status => {
        const v = objdata.find(c => c.category?.find(t => t.name === p.device.category && status.code === t.code))
        return v
    }).map(status => {
        const v = objdata.find(c => c.category?.find(t => t.name === p.device.category && status.code === t.code)) as I
        const category1 = v?.category?.find(t => t.code === status.code)
        if (category1) {
            const { name, dataname, code, ...obj } = category1
            const data = {
                name: dataname ? dataname : v.name,
                value: status.value,
                code: status.code,
                render: v.value,
                divide: obj.divide
            }
            return data
        }
        return {
            ...status,
            rander: '',
            name: '',
            render: v.value
        }

    }) || []
})

</script>

<template>
    <div class="list" v-show="status.length">
        <div class="list-title">
            {{ device.name }}状态
        </div>
        <div v-for="(i, k) in status" class="list-item" :class="(k + 1) === status.length ? 'bottom-1' : ''">
            <div class="list-item-div">
                {{ i.name }}
            </div>
            <div class="list-item-1">
                {{ i.divide ? i.render(i.value / i.divide) : i.render(i.value) }}
            </div>
        </div>
    </div>
</template>

<style scoped>
.list {
    padding: 0px 0px 24px;
    width: var(--liststate-width, 478px);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 5px 15px 35px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(60px);
    border-radius: 12px;
    margin-bottom: 12px;
}


.list-title {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 24px;
    font-weight: 600;

}

.list-item {
    padding: 12px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 72px;
    background: var(--el-menu-bg-color);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
}

.list-item-div {
    width: 130px;
}

.list-item-1 {
    text-align: right;
    flex: 1;

}

.bottom-1 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
</style>